<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from "echarts";
const tableData = ref([
    {
        serialNumber: '1',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '2',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '3',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '4',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '5',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '6',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '7',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '8',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '9',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
    {
        serialNumber: '10',
        time: '2017-10-01 12:00',
        source: '竞价返现',
        amount: '100',
        description: '域名[health-digit.com]竞价结拍金额1200元，折扣优惠100元',
    },
])
const chart = ref(null);
    onMounted(() => {
      const myChart = echarts.init(chart.value);
    
      const option = {
        color: ['#3aa1fe'],
        tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  grid: {
    top: '6%',
    left: '2%',
    right: '2%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      axisLabel: {
        textStyle: { fontSize: 14, color: '#4D4D4D' }
      },
      axisLine: {
        lineStyle: { color: '#999' }
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
    }
  ],
  yAxis: {
    type: 'value',
    name: '折扣优惠',
    nameTextStyle: { fontSize: 14, color: '#4D4D4D' },
    axisLabel: {
      textStyle: { fontSize: 12, color: '#4D4D4D' }
    },
    axisLine: {
      lineStyle: { color: '#707070' }
    }
  },
  series: [
    {
      name: '折扣优惠',
      type: 'bar',
      barWidth: 24,
      data: [
        {
          name: '1月',
          value: '431',
        },
        {
          name: '2月',
          value: '214',
        },
        {
          name: '3月',
          value: '231',
        },
        {
            name: '4月',
          value: '134',
        },
        {
          name: '5月',
          value: '515',
        },
        {
          name: '6月',
          value: '125',
        },{
          name: '7月',
          value: '710',
        },
        {
          name: '8月',
          value: '530',
        },
        {
          name: '9月',
          value: '320',
        },
        {
        name: '10月',
          value: '125',
        },
        {
          name: '11月',
          value: '315',
        },
        {
          name: '12月',
          value: '215',
        }
      ],
      label: {
        show: true,
        position: 'top',
        textStyle: {
          fontSize: 12,
          color: '#000'
        }
      }
    }
  ]
      };
      myChart.setOption(option);
    });



</script>
<template>
    <div class="bs-panel table-box">
        <div class="bs-panel-body">
            <div class="page-title bold">折扣统计</div>
            <div class="dis-view">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <div class="page-title bold">折扣优惠总览</div>
                        <el-row :gutter="20" class="view-row">
                            <el-col :span="12">
                                <div class="view-label">已为您节省</div>
                                <div class="view-value"><span class="val text-primary">7,593</span> 元</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="view-label">预计折扣优惠</div>
                                <div class="view-value"><span class="val">990</span> 元</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="view-label">上年优惠总计</div>
                                <div class="view-value"><span class="val">80</span> 元</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="view-label">今年优惠总计</div>
                                <div class="view-value"><span class="val">5,940</span> 元</div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="14">
                        <div class="page-title bold">折扣优惠统计</div>
                        <div ref="chart" style="width: 100%; height: 200px;"></div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="bs-panel-body">
            <div class="table-top">共1606条折扣优惠记录</div>
            <el-table :data="tableData"  style="width: 100%">
                <el-table-column prop="serialNumber" label="序号" width="100" align="center" />
                <el-table-column prop="time" label="时间" width="240"  align="center"/>
                <el-table-column prop="source" label="来源" width="200" align="center"/>
                <el-table-column prop="amount" label="金额（元）" width="200" align="center"/>
                <el-table-column prop="description" label="描述" />
            </el-table>
            <div class="bs-panel-footer">
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
    .table-top{
        margin-bottom: 10px;
        color: #666;
    }
    .dis-view{
        padding: 0 20px;
    }
    .view-row{
        padding: 0 20px;
        .el-col{
            margin-bottom: 20px;
        }
    }
    .view-label{
        color: rgba(0, 0, 0, 0.42745098039215684);
        margin-bottom: 10px;
    }
    .view-value{
        color: rgba(0, 0, 0, 0.42745098039215684);
        .val{
            font-size: 24px;
            color: #000;
        }
    }
    .message-body{
        padding:10px 25px;
    }
    .bs-panel-body{
        position: relative;
        padding: 25px;
    }
    .bs-panel-body:first-child:before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #d3d7dc;
    }
    .form-footer,
    .form-top{
        height: 32px;
        text-align: right;
    }
    .bs-panel-footer{
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .filter-cell{
        margin-bottom: 15px;
    }
    .filter-box{
        display: flex;
        align-items: center
    }
    .filter-box .el-select{
        margin: 0 10px;
    }
    .filter-cell ::v-deep .el-form-item{
        margin-right: 12px;
    }

</style>